<template>
  <div class="app-container">
    <div class="manage-header">
      <el-form ref="Form" :inline="true" :model="Form" :rules="Rules">
        <el-form-item prop="turbineId">
          <el-input v-model="Form.turbineId" placeholder="请输入机组编号" :validate-event="false" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button v-if="isShow1" type="primary" @click="getData">取消查询</el-button>
      </el-form>
    </div>
    <el-table
      stripe
      border
      height="580"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{'text-align': 'center'}"
    >
      <el-table-column
        prop="turbineId"
        label="机组编号"
        width="100"
        align="center"
      />
      <el-table-column
        prop="manufacturer"
        label="生产厂商"
        align="center"
      />
      <el-table-column
        prop="turbineType"
        label="设备型号"
        align="center"
      />
      <el-table-column
        prop="turbineStatus"
        label="设备状态"
        align="center"
      />
      <el-table-column
        prop="addr"
        label="操作"
        align="center"
      >
        <template v-slot="scope">
          <el-button size="medium" round @click="handleEdit(scope.row)">故障填报</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="故障填报表"
        :visible.sync="dialogVisible"
        width="50%"
        center
        top="1vh"
        :before-close="handleClose"
        class="spec-dialog"
      >
        <el-form ref="form" :model="form" label-width="120px" label-position="left" :rules="rules">
          <el-form-item label="故障机组编号" prop="faultTurbine">
            <el-input v-model="form.faultTurbine" disabled />
          </el-form-item>
          <el-form-item label="故障名称" prop="faultName">
            <el-input v-model="form.faultName" />
          </el-form-item>
          <el-form-item label="故障描述" prop="faultDescribe">
            <el-input v-model="form.faultDescribe" />
          </el-form-item>
          <el-form-item label="故障代码" prop="faultId">
            <el-input v-model="form.faultId" />
          </el-form-item>
          <el-form-item label="故障类别" prop="faultType">
            <el-radio-group v-model="form.faultType">
              <el-radio label="一级" />
              <el-radio label="二级" />
              <el-radio label="三级" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="故障报出时间">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              />
            </el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="form.date2"
                placeholder="选择时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%;"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="故障一级位置" prop="faultLocationOne">
            <el-input v-model="form.faultLocationOne" />
          </el-form-item>
          <el-form-item label="故障二级位置" prop="faultLocationTwo">
            <el-input v-model="form.faultLocationTwo" />
          </el-form-item>
          <el-form-item label="故障三级位置" prop="faultLocationThree">
            <el-input v-model="form.faultLocationThree" />
          </el-form-item>
          <el-form-item label="排查项目" prop="checkItems">
            <el-input v-model="form.checkItems" />
          </el-form-item>
          <el-form-item label="故障原因" prop="faultCause">
            <el-input v-model="form.faultCause" type="textarea" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getTurbineInfo } from '@/api/de_manage'
import { getNormalInfo } from '@/api/pre_repair'
import { addFaultInfo } from '@/api/fault_analysis'
import { updateDevice } from '@/api/de_repair'

export default {
  name: 'Task',
  data() {
    const validateNum = (rule, value, callback) => {
      if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
        callback(new Error('请输入(故障代码)数字值'))
      } else {
        callback()
      }
    }
    return {
      total: 1,
      pageSize: 1,
      isShow1: false,
      dialogVisible: false,
      currentPage: 1,
      tableData: [],
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      Device: {
        turbineId: '',
        turbineStatus: ''
      },
      Form: {
        turbineId: ''
      },
      Rules: {
        turbineId: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ]
      },
      form: {
        faultTurbine: '',
        faultName: '',
        faultId: '',
        faultDescribe: '',
        faultType: '',
        date1: '',
        date2: '',
        faultReportingTime: '',
        faultLocationOne: '',
        faultLocationTwo: '',
        faultLocationThree: '',
        checkItems: '',
        faultCause: ''
      },
      rules: {
        faultTurbine: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ],
        faultName: [
          { required: true, trigger: 'blur', message: '请输入故障名称' }
        ],
        faultId: [
          { required: true, trigger: 'blur', validator: validateNum }
        ],
        faultType: [
          { required: true, trigger: 'change', message: '请选择故障类型' }
        ],
        faultLocationOne: [
          { required: true, trigger: 'blur', message: '请输入故障一级位置' }
        ],
        faultLocationTwo: [
          { required: true, trigger: 'blur', message: '请输入故障二级位置' }
        ],
        faultLocationThree: [
          { required: true, trigger: 'blur', message: '请输入故障三级位置' }
        ],
        checkItems: [
          { required: true, trigger: 'blur', message: '请输入排查项目' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getNormalInfo().then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
        this.isShow1 = false
        this.Form.turbineId = ''
      })
    },
    onSubmit() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          getTurbineInfo(this.Form.turbineId).then(({ data }) => {
            if (data.page.total === 0) {
              this.$message({
                showClose: true,
                message: '没有查询到相应的风电机组信息',
                type: 'error'
              })
            } else {
              this.total = data.page.total
              this.pageSize = data.page.size
              this.tableData = data.page.records
              this.isShow1 = true
            }
          })
        }
      })
    },
    handleEdit(row) {
      this.form.faultTurbine = row.turbineId
      this.dialogVisible = true
    },
    handleCurrentChange(pageNum) {
      getNormalInfo(pageNum).then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
      })
    },
    handleClose() {
      // 关闭弹窗
      this.dialogVisible = false
      this.$refs.form.clearValidate()
    },
    cancel() {
      this.handleClose()
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.Device.turbineId = this.form.faultTurbine
          this.Device.turbineStatus = '出现故障'
          this.form.faultReportingTime = this.form.date1 + ' ' + this.form.date2
          addFaultInfo(this.form).then(() => {
            updateDevice(this.Device).then(() => {
              this.$message({
                type: 'success',
                message: '故障填报成功!'
              })
              this.handleClose()
            })
          })
        }
      })
    }
  }
}
</script>

<style>
.app-container {
  margin: 0 auto;
}

.spec-dialog .el-dialog__body {
  padding: 3px 30px;
  overflow-y: auto;
  height: calc(100vh - 140px);
}
</style>
